<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      自定义指令：

        vue 本身提供的一些指令满足不了业务的需求，一般很少自定义
    </pre>
		<div id="app">
			<input
				type="text"
				v-focus
				v-color="{ bgColor: 'yellow', fontColor: 'red'}"
			/>
		</div>

		<script src="scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				directives: {
					// 键：指自定义指令
					// 值：指自定义指令执行的逻辑代码
					focus: {
						inserted: function (el) {
							console.dir(el)
							el.focus()
						},
					},
					color: {
						inserted: function (el, params) {
							el.style.backgroundColor = params.value.bgColor
							el.style.color = params.value.fontColor
						},
					},
				},
			})
		</script>
	</body>
</html>
